<template>
  <div>
      <div class="container">
        <el-row :gutter="20">
           <el-col :span="6" v-for=" (item,index) in note" :key="item.noteId">
              <div class="node" @click="gotoNoteDetail(item.noteId)"   @mouseenter="changeShow(1)" @mouseleave="changeShow(0)">
                <NodeCard :id="item.noteId" :title="item.title" :content="item.content.length > 100 ? item.content.substring(0,100) + '...' : item.content " v-on:deleteNote="deleteNote" :index="index" :is-show="show"/>
              </div>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
import NodeCard from "./NoteCard"
import pubsub from "pubsub-js";
import {getNote} from "../../network/Details/note/note";
export default {
  name: "NoteHome",
  components:{
    NodeCard,
  },
  data(){

    return {
      note:[],
      show:true,
      title:'',
      pageNum:0,
      username: window.sessionStorage.getItem("username")
    }

  },
  methods:{
    changeShow(flag){
      if(flag == 1){
      this.show = true
      }else {
       this.show = false
      }

    },
    deleteNote() {
      this.getPageInfo({
        authorId: 1,
        pageNum: this.pageNum,
        pageSize: 12
      },'/note/queryAllNotes')
    },
    gotoNoteDetail(noteId){
      this.$router.push({
        name:"NoteDetail",
        query:{
          noteId:noteId
        }
      })
    },

    getPageInfo(data,url){
      getNote(data,url).then(res => {
        this.note =  res.data.info
        pubsub.publish("pageInfo",res.data.data.total);
      })
    },
  },
  created() {
      console.log(this.username)
    this.getPageInfo({
      authorId: 1,
      pageNum: this.pageNum,
      pageSize: 12
    },'/' + this.username + '/note/queryAllNotes')

    const _this = this;
    pubsub.subscribe("change",function (msg,pageNum) {
      _this.pageNum = pageNum;
      _this.getPageInfo({
        authorId: 1,
        pageNum: pageNum,
        pageSize: 12
      },'/note/note/queryAllNotes');
    })

    pubsub.subscribe("info",function (msg,title){
      _this.getPageInfo({
          title: title,
          pageNum: 1,
          pageSize: 12
      },'/note/queryNotesByTitle');
      _this.title = title;
    })

    pubsub.subscribe("title",function (msg,pageNum) {
      _this.getPageInfo({
        title: _this.title,
        pageNum: pageNum,
        pageSize: 12
      },'/note/note/queryNotesByTitle');
    })
  }
}
</script>

<style scoped>

  .node:hover{
       transform: translateY(-8px);
       transition: transform 0.2s;
  }
</style>
